import { memo, useCallback, useMemo, useReducer } from "react";

interface IState{
  num: number;
}
interface IAction{
  type: string;
  payload?: any;
}
const UseReducer = ()=>{
  const reducer = (state: IState, action: IAction)=>{
    switch (action.type) {
      case '+':
        return {...state, num: ++state.num};
      case '-':
        return {...state, num: --state.num};
      default:
        return state
    }
  }
  const [state, dispatch] = useReducer(reducer, {num: 100});

  return <div>
    <button onClick={()=>{
      dispatch({
        type: '+'
      })
    }}>+</button>
    <span>{state.num}</span>
    <button onClick={()=>{
      dispatch({
        type: '-'
      })
    }}>-</button>
  </div>
}

export default UseReducer;
